<template>
    <div class="line1">
        <section class="data_section">
            <header class="section_title">数据统计</header>
            <el-row :gutter="20" style="margin-bottom: 10px;">
                <el-col :span="4">
                    <div class="data_list today_head">
                        <span class="data_num head">当日数据：</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">
                        <span class="data_num">{{userCount}}</span>新增用户
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">
                        <span class="data_num">{{orderCount}}</span>新增订单
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">
                        <span class="data_num">{{adminCount}}</span>新增管理员
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="data_list all_head">
                        <span class="data_num head">总数据：</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">
                        <span class="data_num">{{allUserCount}}</span> 注册用户
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">
                        <span class="data_num">{{allOrderCount}}</span> 订单
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">
                        <span class="data_num">{{allAdminCount}}</span> 管理员
                    </div>
                </el-col>
            </el-row>
        </section>
        <h1>表格</h1>
        <div id="line2" class="line1"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import axios from 'axios';
export default {
    props: {
        // 父辈向子辈传参
    },
    name: '',
    data() {
        return {
            sevenDay: [],
            sevenDate: [[], [], []],
            day: '',
            year: '',
            month: '',
            userCount: '',
            orderCount: '',
            adminCount: '',
            allUserCount: '',
            allOrderCount: '',
            allAdminCount: ''
        };
    },
    created() {
        axios.get('http://elm.cangdu.org/bos/orders/count').then(res => {
            console.log(res);
            this.allOrderCount = res.count;
        });
        axios.get('http://elm.cangdu.org/v1/users/count').then(res => {
            console.log(res);
            this.allUserCount = res.count;
        });
        axios.get('http://elm.cangdu.org/admin/count').then(res => {
            console.log(res);
            this.allAdminCount = res.count;
        });
        // 实例被创建之后执行代码
    },
    computed: {
        // 计算属性
    },
    components: {
        // 组件的引用
    },
    methods: {
        // 方法集合
        // 获取数据
        shuju() {
            var data = new Date();
            var day = data.getDate();
            var year = data.getFullYear();
            // console.log(data, day, year);
            if (data.getMonth() + 1 < 10) {
                var month = `0${data.getMonth() + 1}`;
            } else {
                var month = data.getMonth() + 1;
            }

            let date = [
                {
                    name: '新注册用户',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: '平均值' }]
                    }
                },
                {
                    name: '新增订单',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                },
                {
                    name: '新增管理员',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
            ];
            // 获取数据
            let arr = [];
            for (let i = 0; i < 7; i++) {
                arr.unshift(`${year}-${month}-${day - i}`);
                axios.get(`http://elm.cangdu.org/statis/user/${year}-${month}-${day - i}/count`).then(res => {
                    console.log(1,res.count);
                   	this.userCount = res.count;
					date[0].data.unshift(res.count);
					
                });
                axios.get(`http://elm.cangdu.org/statis/order/${year}-${month}-${day - i}/count`).then(res => {
                    this.orderCount = res.count;
                    date[1].data.unshift(res.count);
                });
                axios.get(`http://elm.cangdu.org/statis/admin/${year}-${month}-${day - i}/count`).then(res => {
                    date[2].data.unshift(res.count);
                    this.adminCount = res.count;
                    console.log(date);
                    this.darwLineWithHisOrderCountDate(date, arr);
                });
            }
        },
        // 历史30天内每天所有订单总数变化 - 折线图
        darwLineWithHisOrderCountDate(hisOrderCountDateList, legendData) {
            // 基于准备好的DOM,初始化echarts实例
            let myChart = echarts.init(document.getElementById('line2'));

            // 绘制图表
            myChart.setOption({
                title: {
                    text: '走势图',
                    subtext: ''
                },
                
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新注册用户', '新增订单', '新增管理员']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: legendData
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 200
                },
                series: hisOrderCountDateList
                
            });
        }
    },
    mounted() {
        // 页面进入时加载内容
        this.shuju();
    },
    watch: {
        // 监测变化
    },
    activated: {
        // keep-alive 进入触发的函数
    },
    deactivated: {
        // keep-alive 页面即将替换新的页面的时候
    }
};
</script>
<style scoped>
.line1 {
    width: 100%;
    height: 90%;
}
.data_section {
    padding: 20px;
    margin-bottom: 40px;
}
.section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
}
.data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
}
.data_num {
    color: #333;
    font-size: 26px;
}
.head {
    border-radius: 6px;
    font-size: 22px;
    padding: 4px 0;
    color: #fff;
    display: inline-block;
}

.today_head {
    background: #ff9800;
}
.all_head {
    background: #20a0ff;
}

</style>
